<template>
<el-container>
  <el-header> 
    <div class="header_left">
      <img class="logo" src="../assets/logo2.png" alt="">
      <span class="title">电商管理系统</span>
    </div>
    <div class="header_right">
      <el-button class="logout" icon="iconfont icon-quit" circle @click="logout"></el-button>
    </div>
  </el-header>
  <el-container>
    <el-aside :width="isCollapse ? '64px':'200px'">
       <div class="toggle_button" @click="toggleCollapse">|||</div>
       <el-menu
         class="menu"
         unique-opened
         :collapse="isCollapse"
         :collapse-transition="false"
         :router="true"
         :default-active="activePath"
         background-color="#313743"
         text-color="#fff"
         active-text-color="#409EFF">
            <!-- 一级菜单 -->
          <el-submenu v-for="item in menuList" :key="item.id" v-bind:index="item.id + ''">
              <template slot="title">
                <i :class="icons[item.id]" class="icon"></i>
                <span>{{item.authName}}</span>
              </template>
            <!-- 二级菜单 -->
            <el-menu-item v-for="childItem in item.children" :key="childItem.id" :index="'/'+childItem.path" @click="onMenuStateChange('/'+childItem.path)">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{childItem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
    </el-aside>
    <el-main>
      <!-- 主页面子路由 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>
<script>
import { getMenus } from '../config/api'
export default {
  data(){
    return{
      menuList:[],
      icons:{//左侧的菜单图标
        '125':'iconfont icon-user-info',
        '103':'iconfont icon-auth',
        '101':'iconfont icon-more',
        '102':'iconfont icon-pingbiao',
        '145':'iconfont icon-statistics'
      },
      isCollapse:false,//菜单是否折叠
      activePath:'',//菜单激活选项
    }
  },
  created() {
    this.getMenuList();
    this.activePath = window.sessionStorage.getItem('activePath');
  },
  methods:{
     getMenuList(){
      getMenus().then(res=>{
        this.menuList = res;
      }).catch(e=>{
        this.$message({
            type: 'info',
            message: '已取消'
        });
      });
    },
    toggleCollapse(){//折叠菜单栏
      this.isCollapse = !this.isCollapse;
    },
    onMenuStateChange(path){//子菜单选择后状态保存
      this.activePath = path;
      window.sessionStorage.setItem('activePath',path);
    },
    logout(){
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          distinguishCancelAndClose: true,   
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
          window.sessionStorage.clear();
          this.$router.push('/login');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    }
  }
}
</script>
<style lang="less" scoped>
  .el-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #003040;
    color: #fff;
    .header_left{
      display: flex;
      align-items: center;
      .logo{
        width: 30px;
        height: 30px;
      }
      .title{
        margin-left: 20px;
        font-size: 20px;
        font-weight: 600;
        font-family: JetBrains Mono;
      }
    }
    .logout{
      padding: 6px;
    }
  }
  
  .el-aside {
    background-color: #313743;
    color: #333;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }
  
  .el-container {
    height: 100%;
  }
  // 左侧菜单样式
  .el-menu{
    width: 100%;
    border-right:0px;
    .icon{
      margin-right: 10px;
      font-size: 22px;
    }
  }
  .toggle_button{
    background-color: #485163;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
</style>
